
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  </style>
</head>
<body>
<canvas id='canvas' width=200 height=200></canvas>
<script>
  var canvas=document.querySelector('canvas'),
    context=canvas.getContext('2d'),
    r = 20, s = 1;
  context.fillStyle = 'rgba(255,0,0,0.5)';
  change(context,r);

  function change(context,r){
    context.clearRect(0,0,200,200);
    context.beginPath();
    r = r + s
    context.arc(100,100, r,0,2*Math.PI);
    context.closePath();
    context.fill();
    if(r > 20) s = -0.25
    if(r < 5) s = 0.25
    window.requestAnimationFrame(function(){
      change(context, r++)
    });
  }
</script>
</body>
</html>